<template>
  <div class="flex h-full w-full flex-col p-4">
    <div class="text-1 mb-4 ml-1 mt-2 text-2xl font-bold tracking-wider">
      <h2>工具箱</h2>
    </div>
    <div v-for="(v, k) in toolList" :key="k" class="rounded-lg">
      <div
        class="my-1 flex items-center justify-between py-2"
        @click="closeSelect(k)"
      >
        <!-- 标题 -->
        <div class="flex items-center">
          <button>
            <svg
              width="20"
              height="20"
              viewBox="0 0 32 32"
              class="fill-none transition"
              :class="openState[k] === true ? '' : '-rotate-90'"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M24 12L16 20L8 12"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </button>
          <span class="ml-1 cursor-pointer font-semibold tracking-wide">{{
            nameMap(k)
          }}</span>
        </div>
        <a-tag size="small" :bordered="false">
          {{ v.length }}
        </a-tag>
      </div>

      <div
        class="grid transition-all duration-300 ease-in-out"
        :class="
          openState[k]
            ? 'grid-rows-[1fr] opacity-100'
            : 'grid-rows-[0fr] opacity-0'
        "
      >
        <div class="overflow-hidden">
          <div
            v-for="item in v"
            :key="item.routerPath"
            class="ml-5 flex items-center justify-between border-l-2 px-4 py-1"
            :class="colorMap(k, route.path === item.routerPath)"
          >
            <a-tooltip :title="item.name" placement="right">
              <a
                href="javascript:"
                @click="openTool(item)"
                class="truncate"
                :class="route.path === item.routerPath ? 'font-bold' : ''"
              >
                {{ item.name }}
              </a>
            </a-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { computed, ref, watch } from 'vue'
import { ToolType } from '@/types/tools.ts'
import { useTaskStore } from '@/store/index.ts'

const { addTask } = useTaskStore()
import useToolsData from '@/hooks/useToolsData'

const { toolList } = useToolsData() // 获取已分类的数组

// 路由
const router = useRouter()
const route = useRoute()

// 当前分类
let currentCategory = computed(() => {
  for (let classify in toolList.value) {
    for (let tool of toolList.value[classify]) {
      if (tool.routerPath === route.path) {
        return classify
      }
    }
  }
  return ''
})
let openState = ref<Record<string, boolean>>({}) // false开 true关

watch(
  () => route.path,
  () => {
    const state: Record<string, boolean> = openState.value
    for (let classify in toolList.value) {
      if (classify === currentCategory.value) {
        state[classify] = true
      }
    }
    openState.value = state
  },
)
// 渲染函数
function nameMap(v: string) {
  const nameMap: Record<string, string> = {
    code: '代码工具',
    daily: '日常工具',
    other: '其它工具',
  }
  return nameMap[v] ?? v
}

function colorMap(v: string, isActive: boolean) {
  const colorMap: Record<string, string[]> = {
    code: ['border-yellow-200', 'border-amber-400'],
    daily: ['border-green-200', 'border-green-400'],
    other: ['border-gray-200', 'border-gray-400'],
  }
  return colorMap[v][isActive ? 1 : 0] ?? 'border-gray-300'
}

function closeSelect(category: string) {
  openState.value[category] = !openState.value[category]
}

function openTool(item: ToolType) {
  addTask(item)
  router.replace(item.routerPath)
}
</script>

<style scoped></style>
